{% extends 'base.html' %}
{% from 'bootstrap/form.html' import render_form, render_field, render_form_row %}
{% block content %}
    <div class="container" style="max-width: 1100px; margin: 0 auto;">

        <!-- Tittle -->
        <h2 class="page-header">正在修复脚本</h2>

        <!-- Main component for a primary marketing message or call to action -->

        <div class="row" style="display:flex; justify-content:space-around;">

            <!-- 左边栏 -->
        <div class="col-lg-3" style="margin: 0 auto;
        max-width: 400px;
        height: 400px;">
        <!-- 左边上边的块 -->
        <div class="jumbotron">
            <div style="text-align:center; ">
                <a href={{ url_for('show_result') }}>
                    <button type="submit" class="btn btn-success btn-lg btn-block">NEXT</button>
                </a>
                <h5>请确保提交的文件都符合要求再点击此按钮</h5>
            </div>
        </div>
        <!-- 左边中间的块 -->
        <ul class="list-group">
            <li li class="list-group-item">上传界面</li>
            <li class="list-group-item">运行配置界面</li>
            <li class="list-group-item">等待界面<span class="glyphicon glyphicon-ok" style="color: green; left: 100px;"></span></li>
            <li class="list-group-item">结果界面</li>
        </ul>
    </div>

            <!-- 右边主界面 -->
            <div class="col-lg-9 jumbotron" style="
                    margin: 0 auto;
                    background-color:lightgray">
                <h3>正在修复···</h3>
                <hr />
                <h6 style="font-size: small">AppName: </h6>
                <hr />

                <h6 style="font-size: small">旧版本号: </h6>
                <hr />

                <h6 style="font-size: small">新版本号: </h6>
                <hr />

                <div class="progress">
                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
                </div>

                {% for message in messages %}
                    {{ message }}<br>
                {% endfor %}

            </div>

        </div>
    </div>

{% endblock content %}